<template>
	<view class="viewport default-bgcolor mine-service-center">
		<view class="welcome">
			<view class="welcome__hi">Hi~</view>
			<view class="welcome__say">有什么可以帮助到您！</view>
			<image class="welcome__girl" src="/static/image/mine/girl.png"></image>
		</view>

		<view class="service-item">
			<image class="service-item__icon" src="/static/image/mine/telephone.png"></image>
			<view class="service-item__info">
				<view class="service-item__info__title">400客服电话 {{detail.tel}}</view>
				<view class="service-item__info__desc">
					工作时间：{{detail.workTime}}
				</view>
				<view class="service-item__info__desc">
					{{detail.desc}}
				</view>
			</view>
		</view>

		<view class="service-item">
			<image class="service-item__icon" src="/static/image/mine/online-service.png"></image>
			<view class="service-item__info">
				<view class="service-item__info__title">在线客服</view>
				<view class="service-item__info__desc">
					工作时间：{{detail.workTime}}
				</view>
				<view class="service-item__info__desc">
					{{detail.desc}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts" name="ServiceCenter">
	import { getSupport } from '@/apis/common';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	const detail = ref({
		tel: ''
	});

	onLoad(() => {
		getSupport().then((res) => {
			detail.value = res.data ?? {};
		});
	});
</script>

<style lang="scss">
	.mine-service-center {
		.welcome {
			position: relative;
			display: inline-flex;
			flex-direction: column;
			flex-shrink: 0;
			width: 100%;
			height: 329rpx;
			padding: 88rpx 0 0 42rpx;
			box-sizing: border-box;

			&__hi {
				width: 82rpx;
				height: 44rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #000000;
				line-height: 44rpx;
			}

			&__say {
				width: 400rpx;
				height: 44rpx;
				margin-top: 30rpx;
				font-weight: 600;
				font-size: 40rpx;
				color: #000000;
				line-height: 44rpx;
			}

			&__girl {
				position: absolute;
				top: 26rpx;
				right: 28rpx;
				display: inline-block;
				width: 280rpx;
				height: 303rpx;
			}
		}

		.service-item {
			display: inline-flex;
			align-self: center;
			align-items: center;
			width: 690rpx;
			padding: 44rpx 32rpx;
			box-sizing: border-box;
			border-radius: 16rpx;
			background-color: white;

			&__icon {
				display: inline-flex;
				flex-shrink: 0;
				width: 101rpx;
				height: 101rpx;
			}

			&__info {
				display: flex;
				flex-direction: column;
				flex: 1;
				padding: 0 0 0 24rpx;
				box-sizing: border-box;

				&__title {
					padding-bottom: 28rpx;
					box-sizing: border-box;
					line-height: 38rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;
				}

				&__desc {
					font-weight: 400;
					font-size: 26rpx;
					color: #929292;
					line-height: 44rpx;
				}
			}

			&+.service-item {
				margin-top: 30rpx;
			}
		}
	}
</style>